---
import GlobeIcon from "~icons/ph/globe-hemisphere-west-duotone";
import GithubIcon from "~icons/ph/github-logo-duotone";
import siteData from "~/data/sites";
import type { ProjectMeta } from "~/models/project";
import MainLayout from "./MainLayout.astro";
import BackButton from "../components/BackButton.astro";

export type Props = {
	frontmatter: ProjectMeta;
	slug: string;
};
const { frontmatter, slug } = Astro.props as Props;
---

<MainLayout
	seo={{
		title: frontmatter.title,
		description: frontmatter.description,
		thumbnail: `${siteData.siteUrl}/${slug}/cover.webp`,
	}}
>
	<div class="mx-auto max-w-screen-lg px-4">
		<BackButton />
	</div>
	<section
		class="max-w-screen-lg grid grid-cols-[2fr_1fr] grid-rows-[repeat(3,minmax(min-content,max-content))] grid-flow-row-dense items-start my-8 mx-auto px-4 gap-4"
	>
		<div class="col-start-1 col-end-3 md:col-start-1 md:col-end-2 w-full">
			<div class="overflow-hidden border border-dashed border-pink-300 rounded-md overflow-hidden">
				{frontmatter.hasImage ? (
					<img
						src={`/assets/projects/${slug}/cover.webp`}
						alt={frontmatter.title}
						class="block w-full h-full bg-pink-100"
						loading="lazy"
					/>
				) : (
					<div
						class="flex items-center justify-center w-full min-h-xs bg-pink-100"
					>
						<span class="text-pink-500 font-serif text-2xl font-semibold">
							{frontmatter.title}
						</span>
					</div>
				)}
			</div>
		</div>
		<div class="col-start-1 col-end-3 md:col-start-1 md:col-end-2 font-serif text-lg leading-relaxed">
			<div
				class="flex flex-col md:flex-row gap-4 items-center justify-between mt-2 pb-4 border-b border-dashed border-pink-300"
			>
				<h1 class="text-pink-950 font-heading text-2xl font-semibold">
					{frontmatter.title}
				</h1>
				<div class="flex gap-2">
					<a
						class="flex gap-1 items-center border border-dashed border-pink-300 py-1 px-2 text-pink-950  hover:text-pink-800 rounded-md"
						href={frontmatter.source} target="_blank" rel="norel noreferrer"
					>
						<GithubIcon class="w-6 h-6" />
						源代码
					</a>
					{
						frontmatter.demo !== null && (
							<a
								class="flex gap-1 items-center border border-dashed border-pink-300 py-1 px-2 text-pink-950 hover:text-pink-800 rounded-md"
								href={frontmatter.demo} target="_blank" rel="norel noreferrer"
							>
								<GlobeIcon class="w-6 h-6" />
								访问
							</a>
						)
					}
				</div>
			</div>
			<main class="prose pslate-custom">
				<slot />
			</main>
		</div>
		<div
			class="col-start-1 md:col-start-2 col-end-3 row-start-2 md:row-start-1 row-end-3 md:-row-end-1 w-full p-4 border-dashed border border-pink-300 rounded-md"
		>
			<span
				class="block text-pink-950 font-semibold font-serif text-xl border-dashed border-b border-pink-300 pb-2"
			>
				技术栈
			</span>
			{
				frontmatter.stack.map(([stackName, stackHomepage]) => (
					<div class="grid grid-cols-[3rem_1fr] gap-2 items-center pt-3">
						<div
							class="flex items-center justify-center p-2 border-dashed border border-pink-300 rounded-md bg-white overflow-hidden aspect-1"
						>
							<img
								class={`w-full ${stackName.toLowerCase() === "nextjs" ? "filter-invert" : ""}`}
								src={`/assets/logo/${stackName.toLowerCase().replace(/\s+/g, "-")}.png`}
								alt={stackName}
							/>
						</div>
						<a
							href={stackHomepage}
							class="text-pink-950 hover:text-pink-800 font-serif text-lg no-underline"
							target="_blank"
							rel="norel noreferrer"
						>
							{stackName}
						</a>
					</div>
				))
			}
		</div>
	</section>
</MainLayout>
